<template>
	<view class="page-body p20">
		<view class="bg-white mt20 p20 superior_box">
			<u-image class="fl headimgurl" :src="supply_headimgurl" shape="circle">
				<u-loading slot="loading"></u-loading>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
			</u-image>
			<view class="fl ml20">
				<view class="block">{{proxyInfo.supply_name}} <text class="level">{{proxyInfo.parent_level}}</text></view>
				<text class="block mt10">电话：{{proxyInfo.supply_mobile}}</text>
			</view>
			
			<view class="persql">上级信息</view>
		</view>
		<view class="bg-white mt20 p20 up_box">
			<view class="title">您正在申请升级</view>
			<view class="levle_box mt60" @click="showProxySelect=true">
				<u-image class="img" width="80rpx" height="80rpx" src="/pagesB/static/channel/images/title_icon/icon_01.png"></u-image>
				<view v-if="isMaxLevel==0">
					<view class="mt60 select_level">{{proxy_name}} <u-icon class="ml10" name="arrow-down-fill"  size="26"></u-icon></view>
					<view class="tip">请选择升级级别</view>
				</view>
				<view v-else class="select_level">
					你已是最高级别
				</view>
			</view>
			<view class="mt40">
				<u-steps :list="stepsList" :current="current"></u-steps>
			</view>
			<u-select v-model="showProxySelect" :default-value="proxyDefault" :list="proxyList" @confirm="confirmProxy"></u-select>
			<view v-if="isMaxLevel==0" class="mt60 condition_box">
				<view class="tit">升级条件 
					<text v-if="upgrade_all_limit == 0" class="tip ml20">- 满足以下任一条件</text>
					<text v-else class="tip ml20">- 满足以下全部条件</text>
				</view>
				<view class="tip" v-for="(item, index) in condition" :key="index" :class="item.status==9?'color-green':''">
					{{item.text}}
				</view>
				<view class="join-box mt50" v-if="uplevel_goods_money_status == 0">
					还需充值升级货款：￥{{diff_uplevel_goods_money}}
					<u-button class="fr" size="mini" type="primary" shape="circle" @click="app.goPage('/pagesB/channel/wallet/recharge?type=uplevelGoodsMoney&money='+diff_uplevel_goods_money)">前往充值</u-button>
				</view>
				<view class="join-box mt50" v-if="upgrade_earnest_money_status == 0">
					还需充值保证金：￥{{diff_earnest_money}}
					<u-button class="fr" size="mini" type="primary" shape="circle" @click="app.goPage('/pagesB/channel/wallet/recharge?type=earnestMoney&money='+diff_earnest_money)">前往充值</u-button>
				</view>
			</view>
		</view>
		<u-button v-if="isMaxLevel==0" size="default" shape="circle" type="primary" class="mt80" @click="post">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				supply_headimgurl: '',
				proxyInfo:{
					byUser:{},
					proxyLevel:{}
				},
				stepsList: [],
				current:0,
				isMaxLevel:0,//是否已是最高级别
				proxyList:[],
				showProxySelect:false,
				proxyDefault:[],
				proxy_id:0,
				proxy_name:'',
				condition:[],//升级条件,
				upgrade_all_limit:0,
				diff_earnest_money:0,
				diff_uplevel_goods_money:0,
				uplevel_goods_money_status:0,
				upgrade_earnest_money_status:0
				
			}
		},
		onLoad() {
		},
		onShow: function() {
			//获取登录会员信息
			this.$u.api.getProxyInfo().then(res => {
				this.proxyInfo = res.data.proxyInfo;
				this.supply_headimgurl = this.config.baseUrl+this.proxyInfo.supply_headimgurl;
			});
			this.getUpgradeLevel();
		},
		computed: {},
		onReady() {},
		methods: {
			getUpgradeLevel(){//获取可升级的层级
				this.$u.post('channel/api.proxy_users/getUpgradeLevel').then(res => {
					this.stepsList = res.data.stepsList;
					this.current = res.data.stepsNum;
					if (res.data.upList.length > 0){
						let proxy = res.data.upList[0];
						this.proxy_id = proxy.proxy_id;
						this.proxy_name = proxy.proxy_name;
						this.condition = proxy.condition;
						this.upgrade_all_limit = proxy.upgrade_all_limit;
						this.diff_uplevel_goods_money = proxy.diff_uplevel_goods_money;
						this.diff_earnest_money = proxy.diff_earnest_money;
						this.proxyList = res.data.upList;
						this.proxyDefault = [0];
						this.uplevel_goods_money_status = proxy.uplevel_goods_money_status;
						this.upgrade_earnest_money_status = proxy.upgrade_earnest_money_status;
					}else{
						this.isMaxLevel = 1;
					}
				});
			},
			confirmProxy(e){
				let that = this;
				this.proxyList.forEach((item,index)=>{
					if (item.proxy_id == e[0].value){
						that.proxy_id = item.proxy_id;
						that.proxy_name = item.proxy_name;
						that.condition = item.condition;
						that.upgrade_all_limit = item.upgrade_all_limit;
						that.diff_uplevel_goods_money = item.diff_uplevel_goods_money;
						that.diff_earnest_money = item.diff_earnest_money;
						that.proxyDefault = [index];
						that.uplevel_goods_money_status = item.uplevel_goods_money_status;
						that.upgrade_earnest_money_status = item.upgrade_earnest_money_status;
						return true;
					}
				})
			},
			post(){//升级申请提交
				this.$u.post('channel/api.proxy_users/appUpgrade',{proxy_id:this.proxy_id}).then(res => {
					this.app.showModal(res.msg,'/pagesB/channel/center/index',false);
				})
			}
		}
	}
</script>

<style lang="scss">
	.superior_box{
		position: relative;
		display: block;
		overflow: hidden;
		.headimgurl {
			width: 100rpx !important;
			height: 100rpx !important;
			border: 5rpx solid #FFFFFF;
		}
		.level{
			margin-left: 10rpx;
			font-size: 24rpx;
			color: $base-color;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
			border: 1rpx solid $base-color;
		}
		.persql{
			font-size: 23rpx;
			background: #5392f3;
			color: #FFFFFF;
		    position: absolute;
		    z-index: 9;
			padding: 0rpx 50rpx;
		    top: 28rpx;
		    right: -63rpx;
		    -webkit-transform: rotate(50deg);
		    transform: rotate(50deg);
		}
	}
	.up_box{
		border-bottom: 1px solid #f1f1f1;
		line-height: 60rpx;
		.title{
			font-size: 28rpx;
		}
		.levle_box{
			text-align: center;
			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
			}
			.select_level{
				font-size: 36rpx;
				font-weight: 600;
			}
			.tip{
				font-size: 23rpx;
				color: $font-color-light;
			}
		}
		.condition_box{
			.tit{
				text-align: left;
				font-size: 32rpx;
			}
			.tip{
				font-size: 26rpx;
				color: $font-color-light;
			}
		}
	}
</style>